import React, { useState } from "react";
import { ModalComponent } from "@/components/iteration";
import PropTypes from "prop-types";
import { Button, Table, Space, Form, Input } from "antd";
import { SearchOutlined, SyncOutlined } from "@ant-design/icons";
import { getUnAuthUserList } from "@/api/system/role";

import { useLoadPageData } from "@/hooks";
import { useParams } from "react-router-dom";

/**
 * 添加/修改信息对话框
 *
 * @param {Function} callback 回调函数
 * @returns {React.Component} Component
 */
const SelectUnAuthUserModel = ({ onCallback, onCancel, ...resProps }) => {
  const [form] = Form.useForm();
  const [confirmLoading, setConfirmLoading] = useState(false);
  const { id: roleId } = useParams();

  const {
    loading,
    dataSource,
    pagination,
    onSearchData, // 搜索数据
    onPageChange,
  } = useLoadPageData(getUnAuthUserList, { roleId });

  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const onFinish = (values) => {
    const data = Object.entries(values).filter(([_, value]) => !!value);
    data.length && onSearchData(values);
  };

  const onModalOK = async () => {
    if (!selectedRowKeys) return;
    setConfirmLoading(true);
    await onCallback(selectedRowKeys).finally(() => setConfirmLoading(false));
    onModalCancel();
  };

  const onModalCancel = () => {
    form.resetFields();
    setSelectedRowKeys([]);
    onCancel && onCancel();
  };

  const columns = [
    { key: "userName", title: "用户名", dataIndex: "userName" },
    { key: "nickName", title: "用户昵称", dataIndex: "nickName" },
    { key: "phoneNumber", title: "手机号码", dataIndex: "phoneNumber" },
    { key: "createTime", title: "创建时间", dataIndex: "createTime" },
  ];

  return (
    <ModalComponent
      title="选择用户"
      {...resProps}
      className="table-modal"
      width="760px"
      onOk={onModalOK}
      onCancel={onModalCancel}
      confirmLoading={confirmLoading}
      destroyOnClose
    >
      <div className="general-wrpper">
        <div className="header-card">
          <Form className="search-card" layout="inline" autoComplete="off" form={form} onFinish={onFinish}>
            <Form.Item name="userName" label="用户名称">
              <Input placeholder="请输入用户名称" />
            </Form.Item>
            <Form.Item name="phoneNumber" label="手机号">
              <Input placeholder="请输入手机号" />
            </Form.Item>
            <Form.Item>
              <Space>
                <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
                  搜索
                </Button>
                <Button icon={<SyncOutlined />} htmlType="reset">
                  重置
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </div>
        <div className="table-card">
          <Table
            size="middle"
            loading={loading}
            columns={columns}
            dataSource={dataSource}
            rowSelection={{ selectedRowKeys, onChange: (v) => setSelectedRowKeys(v) }}
            pagination={{
              current: pagination.pageNum,
              pageSize: pagination.pageSize,
              total: pagination.totalPages,
              showSizeChanger: true,
              showTotal: (total) => `共${total}条`,
              onChange: onPageChange,
            }}
          />
        </div>
      </div>
    </ModalComponent>
  );
};
SelectUnAuthUserModel.propTypes = {
  onCallback: PropTypes.func.isRequired,
  onCancel: PropTypes.func,
};

export default SelectUnAuthUserModel;
